<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医生信息</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <style>
        body{
            margin-right: 50px;
            margin-left: 50px;
        }
      </style>
</head>
<body>
    <div id="app">
<!-- 导航栏 -->
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">患者信息</el-menu-item>
    <el-menu-item index="2">医生信息</el-menu-item>
    <el-menu-item index="3">账单信息</el-menu-item>
    <el-menu-item index="4">挂号信息</el-menu-item>
  </el-menu>

  <br/>
  <!-- 查询,删除 -->
  <el-form :inline="true" :model="searchByCondition" class="demo-form-inline">
    <el-form-item label="医生姓名" >
      <el-input style="width: 150px;" v-model="searchByCondition.name" placeholder="姓名"></el-input>
    </el-form-item>
    <el-form-item label="医生id">
      <el-input style="width: 200px;" v-model="searchByCondition.id" placeholder="身份证号"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-select style="width: 100px;" v-model="searchByCondition.gender" placeholder="性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>


    <el-form-item label="专业">
      <el-select style="width: 120px;" v-model="searchByCondition.specialty" placeholder="专业">
        <el-option label="外科" value="外科"></el-option>
        <el-option label="药学" value="药学"></el-option>
        <el-option label="临床医学" value="临床医学"></el-option>
        <el-option label="中医学" value="中医学"></el-option>
        <el-option label="基础医学" value="基础医学"></el-option>
      </el-select>
    </el-form-item>


    <el-form-item label="科室">
      <el-select style="width: 120px;" v-model="searchByCondition.department" placeholder="科室">
        <el-option label="内科" value="内科"></el-option>
        <el-option label="儿科" value="儿科"></el-option>
        <el-option label="妇产科" value="妇产科"></el-option>
        <el-option label="皮肤科" value="皮肤科"></el-option>
        <el-option label="传染科" value="传染科"></el-option>
        <el-option label="急诊科" value="急诊科"></el-option>
        <el-option label="门诊科" value="门诊科"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="getByCondition">查询</el-button>
      <el-button type="success" @click="getAllDoctors" plain>查询全部</el-button>
      <el-button type="warning" @click="addFormVisible=true" plain>添加医生</el-button>
      <el-button type="danger" @click="deletes" plain>批量删除</el-button>
  
    </el-form-item>
  </el-form>
  <br/>
        <!-- 表格 -->
        <template>
            <el-table
              :data="doctors"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
              type="selection"
              width="55">
            </el-table-column>
    
              <el-table-column
              type="index"
              label="序号"
              width="100"
              >
            </el-table-column>
    
              <el-table-column
                label="身份证号"
                >
                <template slot-scope="scope">
                  <a style="color: black; text-decoration: none;" :href="`patient.html?doctorId=${scope.row.id}`" title="查询所有诊断过的患者信息" > {{ scope.row.id }}</a>
                </template>
              </el-table-column>
              <el-table-column
                label="姓名"
                >
                <template slot-scope="scope">
                  <a :href="`registration.html?doctorId=${scope.row.id}`" title="查询医生所有挂号单"> <el-tag size="medium">{{ scope.row.name }}</el-tag></a>
                </span>
                </template>
              </el-table-column>
    
              <el-table-column
                label="性别"
                >
                <template slot-scope="scope">
                  <span tyle="margin-left: 10px">{{ scope.row.gender }}</span>
                </template>
              </el-table-column>

              <el-table-column
                label="专业"
                >
                <template slot-scope="scope">
                  <span tyle="margin-left: 10px">{{ scope.row.specialty }}</span>
                </template>
              </el-table-column>


              <el-table-column
              label="科室"
              >
              <template slot-scope="scope">
                <span tyle="margin-left: 10px">{{ scope.row.department }}</span>
              </template>
            </el-table-column>


              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                  icon="el-icon-time"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>



<!-- 添加弹窗 -->
<el-dialog title="添加医生信息" :visible.sync="addFormVisible" width="35%">
  <el-form :model="addForm" :rules="rules">
    <el-form-item  label="姓名" :label-width="formLabelWidth" prop="name">
      <el-input placeholder="请输入姓名" style="width: 350px;" v-model="addForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="身份证号" :label-width="formLabelWidth" prop="id">
      <el-input placeholder="请输入身份证号" style="width: 350px;" v-model="addForm.id" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
      <el-select  style="width: 350px;" v-model="addForm.gender" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="专业" :label-width="formLabelWidth" prop="specialty">
      <el-select  style="width: 350px;" v-model="addForm.specialty" placeholder="请选择专业">
        <el-option label="外科" value="外科"></el-option>
        <el-option label="药学" value="药学"></el-option>
        <el-option label="临床医学" value="临床医学"></el-option>
        <el-option label="中医学" value="中医学"></el-option>
        <el-option label="基础医学" value="基础医学"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="科室" :label-width="formLabelWidth" prop="department">
      <el-select  style="width: 350px;" v-model="addForm.department" placeholder="请选择科室">
        <el-option label="内科" value="内科"></el-option>
        <el-option label="儿科" value="儿科"></el-option>
        <el-option label="妇产科" value="妇产科"></el-option>
        <el-option label="皮肤科" value="皮肤科"></el-option>
        <el-option label="传染科" value="传染科"></el-option>
        <el-option label="急诊科" value="急诊科"></el-option>
        <el-option label="门诊科" value="门诊科"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="add">确 定</el-button>
    <el-button @click="addForm={}" type="warning">重置</el-button>
    <el-button @click="addFormVisible = false">取 消</el-button>
  </div>
</el-dialog>



                <!-- 修改弹窗 -->
<el-dialog title="修改医生信息" :visible.sync="updateFormVisible" width="25%">
  <el-form :model="updateForm">
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input placeholder="请输入姓名" style="width: 217px;" v-model="updateForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth">
      <el-select v-model="updateForm.gender" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="专业" :label-width="formLabelWidth">
      <el-select v-model="updateForm.specialty" placeholder="请选择专业">
        <el-option label="外科" value="外科"></el-option>
        <el-option label="药学" value="药学"></el-option>
        <el-option label="临床医学" value="临床医学"></el-option>
        <el-option label="中医学" value="中医学"></el-option>
        <el-option label="基础医学" value="基础医学"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="科室" :label-width="formLabelWidth">
      <el-select v-model="updateForm.department" placeholder="请选择科室">
        <el-option label="内科" value="内科"></el-option>
        <el-option label="儿科" value="儿科"></el-option>
        <el-option label="妇产科" value="妇产科"></el-option>
        <el-option label="皮肤科" value="皮肤科"></el-option>
        <el-option label="传染科" value="传染科"></el-option>
        <el-option label="急诊科" value="急诊科"></el-option>
        <el-option label="门诊科" value="门诊科"></el-option>
        
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updateFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </div>
</el-dialog>
        </div>
</body>

<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/doctor.js"></script>
</html>